<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>

<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Fabric Demo">
<meta name="author" content="Ecsoya">

<title>Fabric Gateway Demo</title>

<!-- Bootstrap core CSS -->
<link rel="shortcut icon" th:href="${baseURL + '/favicon.ico'}">
<link th:href="${baseURL + '/css/explorer/bootstrap.min.css'}"
	rel="stylesheet">
<link th:href="${baseURL + '/css/explorer/datatables.min.css'}"
	rel="stylesheet">
<link
	th:href="${baseURL + '/plugins/jquery-toast/jquery.toast.min.css'}"
	rel="stylesheet">
</head>
<style>
.fileinput-button input {
	position: inherit;
	opacity: 0;
	height: 100px;
	width: 100px;
	top: 0px;
	left: -50px;
}

.fileinput-button {
	overflow: hidden;
}

.input-group-addon {
	background-color: #337ab7;
	border: 1px solid #E5E6E7;
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	padding: 12px 12px;
	text-align: center;
	width: 100px;
	height: 38px;
}
</style>
<body>
	<input type="hidden" id="baseURL" th:value="${baseURL}" />

	<div class="wrapper">
		<header class="header-top">
			<nav class="navbar navbar-light bg-light">
				<div class="container">
					<h1>Fabric IPFS Gateway</h1>
				</div>

				<a th:href="${baseURL + '/explorer'}"><img
					th:src="${baseURL + '/img/explorer/camel.png'}" width="32"
					height="32" alt="区块链浏览器" data-toggle="tooltip" title="区块链浏览器">区块链浏览器</a>
			</nav>
		</header>

		<div class="main-content" style="height: calc(100vh - 96px);">
			<div class="container">
				<div class="row" style="padding-top: 20px; padding-bottom: 20px;">
					<div class="col-sm-12">
						<form class="form-inline" id="ipfs">
							<div class="input-group mb-4 mr-sm-4">
								<div class="input-group-prepend">
									<div class="input-group-text">IPFS地址</div>
								</div>
								<input type="text" class="form-control" id="address"
									name="address" value="/ip4/127.0.0.1/tcp/5001"
									placeholder="输入IPFS地址">
							</div>

							<div class="input-group mb-4 mr-sm-4">
								<div class="input-group-prepend">
									<div class="input-group-text">IPFS网关</div>
								</div>
								<input type="text" class="form-control" id="gateway"
									name="gateway" value="http://127.0.0.1:8080/ipfs/"
									placeholder="输入IPFS网关">
							</div>
						</form>
					</div>
					<div class="col-sm-12">
						<form class="form-inline" id="uploadForm">
							<input type="hidden" id="editId">
							<input type="file" style="display: none"
								onChange="doUploadFile(this)" id="uploadFile" >
							<button type="button" class="btn btn-info mb-2" id="uploadBtn" onclick="upload()">上传</button> 
						</form>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-12">
						<table class="table table-striped table-bordered"
							style="width: 100%" id="dataTable">
							<thead>
								<th width="5%">#</th>
								<th width="15%">名称</th>
								<th width="10%">ContentType</th>
								<!-- <th width="40%">所有人</th> -->
								<th width="15%">Hash</th>
								<th width="15%">创建时间</th>
								<th width="15%">操作</th>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer class="footer bg-light">
		<div class="container">
			<div class="row justify-content-center">
				<span class="copyright" style="color: #606060">Ecsoya(angryred@qq.com)
					<a href="https://ecsoya.github.io/fabric/"> Based on
						Hyperledger Fabric v2.x Network</a>
				</span>
			</div>

		</div>
	</footer>

	<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
		aria-labelledby="demoModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content">
				<div class="modal-header bg-primary text-white">
					<h5 class="modal-title" id="demoModalLabel">添加</h5>
					<button type="button" class="close text-white" data-dismiss="modal"
						aria-label="关闭">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<input type="hidden" id="editId"> <input type="hidden"
						id="editType">
					<div class="row">
						<textarea rows="5" cols="5" placeholder="输入新值（JSON）"
							class="col-sm-12" id="editValues"></textarea>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-warning" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary"
						onclick="performEdit()">确定</button>
				</div>
			</div>
		</div>
	</div>

	<!-- Bootstrap core JavaScript -->
	<script th:src="${baseURL + '/js/explorer/jquery.min.js'}"></script>
	<script th:src="${baseURL + '/js/explorer/popper.min.js'}"></script>
	<script th:src="${baseURL + '/js/explorer/bootstrap.min.js'}"></script>
	<script th:src="${baseURL + '/js/explorer/datatables.min.js'}"></script>
	<script
		th:src="${baseURL + '/plugins/jquery-toast/jquery.toast.min.js'}"></script>
	<script th:src="${baseURL + '/js/explorer/common.js'}"></script>
	<script th:src="${baseURL + '/js/ipfs/index.js'}"></script>
</body>

</html>
